<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto layout-padding-view">
			<div class="system-user-search mb15">
				<!-- <el-input v-model="state.param.keyword" size="default" placeholder="请输入公告名称" style="max-width: 180px"> </el-input>
				<el-button size="default" type="primary" class="ml10" @click="query_user">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button> -->
				<el-button size="default" type="primary" @click="onOpenaddAnnounce">新增</el-button>
			</div>
			<el-table :data="state.tableData" v-loading="state.loading" style="width: 100%">
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="username" label="账号" show-overflow-tooltip></el-table-column>
				<el-table-column prop="password" label="密码" show-overflow-tooltip></el-table-column>
				<el-table-column prop="cookie" label="Cookie" show-overflow-tooltip></el-table-column>
				<el-table-column prop="update_time" label="更新时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="expiration_time" label="到期时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="crea_time" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="200">
					<template #default="scope">
						<el-button size="small" type="primary" @click="onOpenEditUser(scope.row)">修改</el-button>
						<el-button size="small" type="danger" @click="onUserDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="state.param.pageNum"
				background
				v-model:page-size="state.param.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.total"
			>
			</el-pagination>
		</div>
		<DialogComponent ref="DialogRef" @refresh="getTableData()" />
	</div>
</template>

<script setup lang="ts" name="systemRole">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { get_seller_cookie, removeCookie } from '/@/api/user';
// 引入组件
const DialogComponent = defineAsyncComponent(() => import('/@/views/cookie/DialogComponent.vue'));

// 定义变量内容
const DialogRef = ref();
const state = reactive({
	tableData: [],
	total: 0,
	loading: false,
	param: {
		pageNum: 1,
		pageSize: 10,
	},
});
// 初始化表格数据
const getTableData = () => {
	state.loading = true;
	get_seller_cookie(state.param)
		.then((res: any) => {
			state.tableData = res.data;
			state.total = res.total;
		})
		.finally(() => {
			state.loading = false;
		});
};

// 打开修改公告弹窗
const onOpenEditUser = (row: Object) => {
	DialogRef.value.openDialog(JSON.parse(JSON.stringify(row)), 'edit');
};
// 新增公告
const onOpenaddAnnounce = () => {
	DialogRef.value.openDialog('', 'add');
};
// 删除公告
const onUserDel = (row: any) => {
	ElMessageBox.confirm(`此操作将永久删除，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			removeCookie({ id: row.id }).then(() => {
				getTableData();
				ElMessage.success('删除成功');
			});
		})
		.catch(() => {});
};
// 分页改变
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	state.param.pageNum = 1;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getTableData();
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
.system-role-container {
	.system-role-padding {
		padding: 15px;

		.el-table {
			flex: 1;
		}
	}
}
</style>

<!-- <template>
    <div class="system-role-container layout-padding">
        <div class="system-role-padding layout-padding-auto layout-padding-view">
            <div class="system-user-search mb15">
                <el-input v-model="state.cookie" :rows="4" type="textarea" size="default" placeholder="请输入Cookie">
                </el-input>
                <el-button size="default" type="primary" class="mt20" @click="save_cookie">
                    保存
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="systemRole">
import { reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { get_seller_cookie, save_cookie_req } from '/@/api/user';

// 定义变量内容
const state = reactive({
    cookie: ''
});
const save_cookie = () => {
    if (!state.cookie) return ElMessage.error('请输入Cookie')
    save_cookie_req({ cookie: state.cookie.trim() }).then(() => {
        ElMessage.success('保存成功')
        getData()
    })

}
// 初始化表格数据
const getData = () => {
    get_seller_cookie().then(res => {
        console.log(res)
        state.cookie = res.data
        // console.log(state.cookie)
    })
};


// 页面加载时
onMounted(() => {
    getData();
});
</script>

<style scoped lang="scss">
.system-role-container {
    .system-role-padding {
        padding: 15px;


    }
}
</style> -->
